<template>
    <div>
        <search-form :showArea="false" @search="getDataList"></search-form>
        <h1>综合风险评估</h1>
        <div id="main" style="height: 500px;width: 100%;"></div>
    </div>
</template>
<script>
import * as echarts from 'echarts'
import SearchForm from '@/components/search-form'

export default {
    components: {SearchForm},
    data() {
        return {
            title: {},
            wnvYear: wfy.format('yyyy', new Date()),
            legendData: [],
            indicatorData: [],
            seriesData: []
        }
    },
    mounted() {
        this.init()
        // 基于准备好的dom，初始化echarts实例

    },

    methods: {
        init() {
            this.wnvYear = wfy.format('yyyy', new Date());
            this.getDataList({wnvYear: this.wnvYear})
        },
        getDataList(search) {
            console.log("🚀 ~ search", search)
            this.dataListLoading = true
            this.wnvYear = search.evalYear
            this.$http({
                url: this.$http.adornUrl('/admin/wnv/queryListByMonth'),
                method: 'post',
                data: this.$http.adornData(
                    {
                        wnvYear: this.wnvYear
                    }
                )
            }).then(({data}) => {

                console.info('--------------')
                console.info(data)
                if(data.length === 0){
                    this.$message.warning("暂无数据")
                }
                this.dataListLoading = false

                let myChart = echarts.getInstanceByDom(document.getElementById("main"))
                if (myChart == null) {
                    myChart = echarts.init(document.getElementById('main'))
                }
                let xData = [];
                let yData = [];
                data.forEach((item) => {
                  xData.push(item.wnvMonth)
                  yData.push(item.wnvResult)
                })
                // 绘制图表
                myChart.setOption({
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: xData,
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: 'WNV结果',
                            type: 'bar',
                            barWidth: '40',
                            data: yData
                        }
                    ]
                })
            })
        }

    },
}
</script>
<style>
h1 {
    text-align: center;
    color: gray;
}
</style>
